<script setup>
import {  RouterView } from "vue-router";
import { ref } from "vue";
import AsideMenu from "./AsideMenu.vue";
import Header from "./Header.vue";
</script>

<template>
  <el-container class="layout-container-main">
    <el-header height="60px">
      <Header></Header>
    </el-header>

    <el-container class="layout-container-main-body">
      <el-aside width="200px">
        <AsideMenu></AsideMenu>
      </el-aside>
      <el-main>
        <div style="background: white">
          <RouterView />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.layout-container-main {
  width: 100vw;
}
.layout-container-main .el-header {
  color: var(--el-text-color-primary);
  padding: 0px;
}
.layout-container-main .el-aside {
  color: var(--el-text-color-primary);
}

.layout-container-main .el-main {
  padding: 20px;
  overflow-y: auto;
  width: calc(100vw - 200px);
  height: calc(100vh - 60px);
}
</style>
